<template>
  <div class="loadingBox" v-if="loading">
    <div class="loadingBox-main">
      <slot v-if="$slots.default" />
      <el-icon size="28" class="is-loading" v-else>
        <Loading />
      </el-icon>
      <p>{{ loadingMsg }}</p>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    loading?: boolean;
    loadingMsg?: string;
  }>(),
  {
    loadingMsg: '数据加载中...',
  },
);
</script>
<style scoped lang="scss">
.loadingBox {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;

  .loadingBox-main {
    min-width: 300px;
    padding: 32px;
    background: $white;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    >* {
      &:not(:last-child) {
        margin-bottom: 12px;
      }
    }

    .el-progress {
      margin-top: 12px;
      font-size: 12px;
    }

    .el-icon {
      color: $primary;
    }
  }
}
</style>
